document.querySelector('[data-book-search]').addEventListener('input', (event) => {
    const initialListOfBooks = getInitialListOfBooks();
    const enteredValue = event.target.value;
    let sortedListOfBooks = initialListOfBooks.sort(book => {
        if (isEnteredValueInName(enteredValue, book)) return -1
    }).slice(0, 2);

    changeContent(initialListOfBooks, sortedListOfBooks)

    for (let book of Array.from(document.querySelector('.books').children)) {
        if (enteredValue && isEnteredValueInName(enteredValue, book)) {
            book.style.cssText = `
                display: flex;
            `
        } else {
            book.style.cssText = `
                display: none;
            `
        }
    }

    setEmptyValue(enteredValue)


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function getInitialListOfBooks() {
        // Получаем начальный список книг

        const initialListOfBooks = Array.from(document.querySelector('.books').children)
            .filter(book => book.classList.contains('book'))
        console.log(initialListOfBooks)
        return initialListOfBooks
    }

    function setEmptyValue(enteredValue) {
        // Устанавливаем пустое значение

        const numberOfBooksFound = Array.from(document.querySelector('.books').children)
            .filter(book => getComputedStyle(book).display == 'flex');
        
        const text = document.createElement('div');
        text.style.color = '#898989';
        text.style.textAlign = 'center';
        
        if (numberOfBooksFound.length == 0 && enteredValue) {
            text.textContent = 'Книга не найдена';
            document.querySelector('.books').insertAdjacentElement('afterbegin', text)
        }
    }

    function changeContent(initialListOfBooks, sortedListOfBooks) {
        // Меняям содержимое местами в списке книг

        const finalListOfBooks = [...new Set(initialListOfBooks.concat(sortedListOfBooks))]
        const result = finalListOfBooks.map(book => book.outerHTML)
        document.querySelector('.books').innerHTML = result.join('')

    }    

    function isEnteredValueInName(enteredValue, book) {
        // Проверяем соответствует ли введенное значение
        // названию какой-то книги

        const regex = new RegExp(enteredValue, 'gi')
        if (regex.test(book.querySelector('.book-title').textContent)) {
            return true
        } else return false
    }
})